<template>
	<view class="page_box">
		<view class="header">
			 <view class="icon_box">
				<!-- <u-icon @click="bindBtn" name="man-add-fill" color="#ffffff" size="50rpx"></u-icon>
				<u-icon style="margin-left: 30rpx" name="bell-fill" color="#ffffff" size="50rpx" @click="cellClick(22)"></u-icon> -->
			</view>
			
			<view class="bottom_box">
				<view class="leftPart">
					<view class="avatar" @click="editAvatar">
						<u-avatar size="large" :src="avatar"></u-avatar>
					</view>
					<view class="onLogin">
						<view style="display: flex;">
							<view v-if="isEdit" class="nickName1 u-line-1" @click="onlogin">{{nickName || '请登录～'}}</view>
							<view v-else class="nickName">
								<u-input v-model="nickName" placeholder="请输入昵称" :maxlength="10" type="text" confirm-type="done"
									:focus="true" :height="50" :custom-style="{background:'#fff',padding:'0 10rpx',
													borderRadius:'10rpx'}" @blur="editNickName" @confirm="editNickName" />
							</view>
							<view v-if="isLogin" class="level" >
								<image class="levelIcon" src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/level.png">
								</image>
								<view class="level_txt">{{levelName}}</view>
							</view>
						</view>
						<view style="color: #FFFFFF;">手机号：{{phone}}</view>
						<view v-if="isLogin">
							<view style="color: #fff;">客户编码：{{spread_code}}</view>
						</view>
					</view>
				</view>
				<view style="display: flex;">
					<view v-if="isLogin" class="rightPart" @click="toExtension">
						<image style="width: 80rpx;height: 80rpx;margin-bottom: 10rpx;"
							src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/erweima.png"></image>
					</view>
				</view>
			</view>
			
		</view>
		<view class="order">
			<view class="orderLeft">
				<view class="orderItem" v-for="(item , index) in orderList" :key="index" @click="toOrderList(item.id)">
					<image :src="item.icon"></image>
					<view>{{item.text}}</view>
				</view>
			</view>
			<view class="orderRight">
				<image style="width: 20rpx;height: 100rpx;" src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/cut_off_line.png"></image>
				<view class="orderItem" @click="toOrderList(0)">
					<image src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/all_order.png"></image>
					<view>全部订单</view>
				</view>
			</view>
		</view>
		<!-- <view class="account">
			<view class="accountLeft">
				<view class="accountItem" @click="accountClick(index)" v-for="(item , index) in accountList" :key="index">
					<view class="accountNum">
						<view class="number_txt">{{item.number}}</view>
						<view class="unit_txt">{{item.unit}}</view>
					</view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
			<view class="accountRight" @click="accountClick(3)">
				<image style="width: 20rpx;height: 100rpx;" src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/cut_off_line.png"></image>
				<view class="accountItem">
					<image src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/wallet.png"></image>
					<view class="text">我的钱包</view>
				</view>
			</view>
		</view> -->
		<!-- <view style="margin-top: 10rpx;">
			<u-notice-bar v-if="isLogin" bg-color="#e4fafb" color="#20cbd4" mode="vertical" :list="noticeList"></u-notice-bar>
			<u-notice-bar @click="onlogin" v-else bg-color="#e4fafb" color="#20cbd4" mode="vertical" :list="noticeList"></u-notice-bar>
		</view> -->
		<!-- <view style="width: 100%;height: 230rpx;margin-top: 10rpx;" @click="couponClick"><image style="width: 100%;height: 100%;" src="/static/coupon.png"></image></view> -->
		<view class="cell">
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(item , index) in gridMenuList" :key="index" :index="index" @click="cellClick">
					<image class="cellIcon" :src="item.file_url"></image>
					<view class="grid-text">{{item.menu_name}}</view>
				</u-grid-item>
			</u-grid>
			<!-- <u-cell-group>
				<u-cell-item v-for="(item , index) in gridMenuList" :key="index" 
				:index="index"   :title="item.menu_name" @click="cellClick">
					<image slot="icon" class="cellIcon" :src="item.file_url"></image>
				</u-cell-item>
			</u-cell-group> -->
			<view class="footer_info">
				<!-- <view @click="test">YTHeart版权所有©️2021</view> -->
				<!-- <view style="margin-top: 15rpx;">备案/许可证号：鲁ICP备2020042426号-1</view> -->
<!--  #ifdef H5 -->
				<!-- <view style="margin-top:15rpx;">青岛YTHeart科技有限公司 电话：400-013-6665</view> -->
<!-- #endif -->	
			</view>
		</view>
		<login-model ref="loginModel"></login-model>
		<u-modal v-model="modelShow" :show-title="false" :show-cancel-button="true"
			:show-confirm-button="true"
			 confirm-color="#20cbd4" @confirm="bindCode">
			<view style="padding: 40rpx 20rpx;">
				<u-field class="contentItem"
					v-model="realName"
					label="真实姓名"
					placeholder="请填写需要绑定的真实姓名"></u-field>
				<u-field class="contentItem"
					v-model="paper_no"
					label="身份证号"
					placeholder="请填写身份证号"></u-field>
				<view style="margin-top: 15rpx;font-size: 22rpx;color: #909399;text-align: center;">
					<u-icon name="error-circle-fill" :size="25" color="#909399"></u-icon>
					只能修改一次，请慎重填写
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import loginModel from "@/components/public/loginModel.vue";
	import {userInfo,editUserInfo,editHeadImg,isLogin,getMenu,addSpread} from "@/common/api.js";
	export default {
		components: {
			loginModel
		},
		data() {
			return {
				noticeList: [],
				phone:"",
				spread_code:"",
				avatar:"",
				nickName:"",
				isReady:false,
				isLogin:true,
				isEdit:true,
				levelName:"",
				realName:"",//真实姓名
				paper_no:"",//身份证号
				edit_num:0,
				level:"",
				orderList:[
					{icon:getApp().globalData.imageUrl+"daifukuan.png",text:"待付款",id:1},
					{icon:getApp().globalData.imageUrl+"daifahuo.png",text:"待发货",id:2},
					{icon:getApp().globalData.imageUrl+"daishouhuo.png",text:"待收货",id:3},
					{icon:getApp().globalData.imageUrl+"daipingjia.png",text:"待评价",id:4},
				],
				accountList:[
					{number:"0",unit:"元",text:"可提现"},
					{number:"0",unit:"元",text:"累计提现"},
					{number:"0",unit:"个",text:"券"}
				],
				gridMenuList:[],
				modelShow:false,
				invitationCode:"",
				disabled:false,
				confirmBtn:true,
			}
		},
		onReady() {
		},
		onShow() {
			isLogin(this,{type:0})
			userInfo(this,{})
			getMenu(this,{type:1});
		},
		onHide() {
			this.$refs.loginModel.closeModel();
		},
		onTabItemTap(e){
			
		},
		methods: {
			bindBtn(){
				userInfo(this,{});
				this.modelShow=true;
				this.disabled=true;
				this.confirmBtn=false;
				// if(this.realName != "" && this.realName !=null){
				// 	this.disabled=true;
				// 	this.confirmBtn=false;
				// }else{
				// 	this.disabled=false;
				// 	this.confirmBtn=true;
				// }
			},
			bindCode(){
				if(this.realName=="" || this.realName == null){
					this.$u.toast("请填写真实姓名");
					this.modelShow=true;
					return;
				}
				if(this.paper_no=="" || this.paper_no == null){
					this.$u.toast("请填写身份证号");
					this.modelShow=true;
					return;
				}
				if(!this.$u.test.idCard(this.paper_no)){
					this.$u.toast("请填写正确的身份证号");
					this.modelShow=true;
					return;
				}
				editUserInfo(this,{real_name:this.realName,paper_no:this.paper_no})
			},
			findUserInfo(){
				userInfo(this,{});
			},
			levelLog(){
				uni.navigateTo({
					url:"/user/levelLog"
				})
			},
			cellClick(index){
				if(!this.isLogin){
					this.$refs.loginModel.showModel();
					return;
				}
				if(this.gridMenuList[index].menu_url.length<2){
					this.bindBtn();
				}else{
					var path = this.gridMenuList[index].menu_url
					uni.navigateTo({
					  url: path
					});
				}
			},
			couponClick(){
				uni.navigateTo({
					url:"/user/coupon"
				})
			},
			toExtension(){
				uni.navigateTo({
				  url: '/user/extension?level='+this.level
				});
			},
			toOrderList(id){
				if(!this.isLogin){
					this.$refs.loginModel.showModel();
					return;
				}
				uni.navigateTo({
				  url: '/user/orderlist?swiperCurrent='+id
				});
			},
			editAvatar(){
				var that = this;
				if(that.isLogin){
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						success: function(res) {
							editHeadImg(that,res.tempFilePaths[0])
						}
					});
				}else{
					uni.navigateTo({
					  url: "/login/login"
					});
				}
			},
			onlogin(){
				if(this.isLogin){
					this.isEdit=false
				}else{
					uni.navigateTo({
					  url: "/login/login"
					});
				}
			},
			accountClick(index){
				if(!this.isLogin){
					this.$refs.loginModel.showModel();
					return;
				}
				uni.navigateTo({
					url:"/user/my_wallet"
				})
			},
			editNickName(e){
				this.isEdit=true;
				editUserInfo(this,{name:this.nickName})
			},
			test(){
				uni.navigateTo({
				  url: '/user/pin'
				});
			}
		}
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
	.page_box {
		font-family: PingFang SC;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: hidden;
	}
	.header{
		width: 100%;
		/* #ifdef H5 */
		height: calc(0px + 160px);
		/* #endif */
		/* #ifndef H5 */
		height: calc(0px + 160px);
		/* #endif */
		background-image: url("https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/bg_img.png");
		background-size: 100% 100%; 
		background-position: 0% 0%;
		background-repeat: no-repeat no-repeat;
		
	}
	.icon_box{
		width: 100%;
		padding: 20rpx;
		/* #ifndef H5 */
		margin-top: 60rpx;
		/* #endif */
		text-align: right;
	}
	.bottom_box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		padding: 40rpx 40rpx 40rpx;
	}
	.leftPart{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.onLogin{
		margin-left: 20rpx;
	}
	.nickName1{
		font-size: 35rpx;
		font-weight: 500;
		color: #fff;
		margin-bottom: 20rpx;
		width: 200rpx;
	}
	.nickName{
		font-size: 35rpx;
		font-weight: 500;
		color: #fff;
		margin-bottom: 20rpx;
		width: 200rpx;
	}
	.level{
		height: 50rpx;
		background: linear-gradient(90deg, #fbbf48,#fff) no-repeat;;
		border-radius: 20px;
		display: flex;
		align-items: center;
		padding-right: 40rpx;
	}
	.levelIcon{
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
		position: relative;
		left: -5rpx;
	}
	.level_txt{
		text-align: center;
		font-size: 24rpx;
		color: #20CBD4;
		font-weight: bold;
	}
	
	.rightPart{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.order{
		padding: 30rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
	}
	.orderLeft{
		display: flex;
		justify-content: space-between;
		width: 520rpx;
	}
	.orderRight{
		display: flex;
		justify-content: space-between;
		width: 170rpx;
		padding-left: 35rpx;
	}
	.orderItem{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.orderItem image{
		width: 60rpx;
		height: 60rpx;
	}
	.orderItem view{
		font-size: 25rpx;
		color: #82848a;
	}
	.account{
		margin-top: 10rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
	}
	.accountLeft{
		display: flex;
		justify-content: space-between;
		width: 520rpx;
	}
	.accountRight{
		display: flex;
		justify-content: space-between;
		width: 170rpx;
		padding-left: 35rpx;
	}
	.accountItem{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.accountNum{
		display: flex;
		align-items: flex-end;
		margin-bottom: 20rpx;
	}
	.number_txt{
		font-size: 30rpx;
		font-weight: 500;
		color: #20cbd4;
		margin-right: 5rpx;
		line-height: 1;
	}
	.unit_txt{
		font-size: 20rpx;
		color: #20cbd4;
	}
	.accountItem image{
		width: 60rpx;
		height: 60rpx;
	}
	.accountItem .text{
		font-size: 25rpx;
		color: #82848a;
	}
	.cell{
		margin-top: 10rpx;
	}
	.cellIcon{
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 15rpx;
	}
	.footer_info{
		margin: 40rpx;
		padding: 50rpx 20rpx;
		text-align: center;
		color: #909399;
	}
</style>
